import React,{useState,useEffect} from 'react'
import {List,Row,Col,Modal,message,Button} from 'antd'
import axios from 'axios'
import servicePage from '../config/apiUrl'
import '../static/css/ArticleList.css'
const {confirm} =Modal
function LeaveMessage(props){
    const[list,setList] = useState([])
    useEffect(()=>{
        getList()
    },[])
    const getList=()=>{
        axios({
            method:'get',
            url:servicePage.getLeaveMessageList,
            withCredentials:true
        }).then(
            res=>{
                setList(res.data.list)
            }
        )
    }
    const deleteLeaveMessage=(id)=>{
        confirm({
            title:"确认删除这个留言？",
            content:'如果点击OK按钮，留言将永远删除！无法恢复',
            onOk(){
                axios({
                    method:'get',
                    url:servicePage.deleteLeaveMessage+id,
                    withCredentials:true
                }).then(
                    res=>{
                        message.success('留言删除成功')
                        getList()
                    }
                )
            }
        })

    }
    const updateWhether = (id)=>{
        confirm({
            title:"确认审核这个留言？",
            content:'如果点击OK按钮，留言将会被显示！无法恢复',
            onOk(){
                axios({
                    method:'get',
                    url:servicePage.updateLeaveMessageWhether+id,
                    withCredentials:true
                }).then(
                    res=>{
                        message.success('留言审核成功')
                        document.getElementById(id).disabled = true;
                        getList()
                    }
                )
            }
        })
        
        
    }
    const check=(whether)=>{
        if(whether) return '已经审核'
        else return '审核'
    }

    return (
        <div>
            <List
            header={
                <Row className='list-div'>
                    <Col span={4}>
                        <b>对应文章ID</b>
                    </Col>
                    <Col span={4}>
                        <b>留言ID</b>
                    </Col>
                    <Col span={4}>
                        <b>留言者姓名</b>
                    </Col>
                    <Col span={4}>
                        <b>留言内容</b>
                    </Col>
                    <Col span={4}>
                        <b>留言时间</b>
                    </Col>
                    <Col span={4}>
                        <b>操作</b>
                    </Col>
                </Row>
            }
            bordered 
            dataSource={list}
            renderItem={item=>(
                <List.Item>
                    <Col span={4}>
                        <b>{item.articleId}</b>
                    </Col>
                    <Col span={4}>
                        {item.id}
                    </Col>
                    <Col span={4}>
                        {item.leaveName}
                    </Col>
                    <Col span={4}>
                        {item.leaveMessage}
                    </Col>
                    <Col span={4}>
                        {item.time}
                    </Col>
                    <Row gutter={[6,1]}>
                        <Col span={14}>
                            <Button id = {item.id} disabled = {item.whether} className='update-button'  type='primary' onClick={()=>updateWhether(item.id)}>{check(item.whether)}</Button>
                        </Col>
                        <Col span={10}>
                            <Button className='delete-button'  onClick={()=>deleteLeaveMessage(item.id)}>删除</Button>
                        </Col>
                    </Row>

                </List.Item>
            )}
            >

            </List>
        </div>
    )
}
 export default LeaveMessage